import React, { Component } from 'react';
import { Table, Tabs, Input } from 'antd';
import { apiServiceProviderPage } from '@/request/serverAuth'
const { TabPane } = Tabs;
const { Search } = Input;
export default class ServerTable extends Component {
    constructor() {
        super()
        this.state = {
            approvalStatus: 1,//0待审核  1已审核
            tabs: [
                {
                    key: '1',
                    label: '已审核',
                    children: '[]'

                },
                {
                    key: '0',
                    label: '未审核',
                    children: '123'
                }
            ],
            columns: [
                {
                    title: '',
                    dataIndex: 'index',
                    key: 'index',
                },
                {
                    title: '姓名',
                    dataIndex: 'name',
                    key: 'name',
                },
                {
                    title: '职业类型',
                    dataIndex: 'occupationClass',
                    key: 'occupationClass',
                },
                {
                    title: '手机号',
                    dataIndex: 'mobile',
                    key: 'mobile',
                },
                {
                    title: '微信号',
                    dataIndex: 'wxNumber',
                    key: 'wxNumber',
                },
                {
                    title: '家庭现住址',
                    dataIndex: 'address',
                    key: 'address',
                    render: (text, content) => <div style={{ width: '400px',wordBreak:'break-all' }}>{text}</div>
                },
                {
                    title: '操作',
                    dataIndex: 'operate',
                    key: 'operate',
                    render: (text, content) => <div onClick={() => this.handleLook(content)}>查看</div>,
                },
            ],
            dataSource: [],
            pageNo: 1,
            pageSize: 10,
            totalCount: 0,
            searchParams: {
                name: '',
                mobile: ''
            }
        }
    }
    componentDidMount() {
        this.getData()
    }
    getData = () => {
        const { pageNo, pageSize, approvalStatus } = this.state
        apiServiceProviderPage({
            pageNo: pageNo,
            pageSize: pageSize,
            approvalStatus: approvalStatus,
            ...this.state.searchParams
        }).then(res => {
            if (res.code == 0) {
                this.setState({
                    dataSource: res.data.map((item, index) => {
                        return {
                            ...item,
                            index: index + 1
                        }
                    }),
                    totalCount: res.totalCount
                })
            }
        })
    }
    handleLook = (row) => {
        console.log(row, 'handleLook');
        this.props.history.push(`/serverAuth/detail/${row.serviceProviderId}/${this.state.approvalStatus}`)
    }
    tabChange = (e) => {
        console.log(e, 'tabChange');
        this.setState({
            approvalStatus: e,
            pageNo: 1,
            searchParams: {
                name: '',
                mobile: ''
            }
        }, () => {
            this.getData()
        })
    }
    onChange = (e) => {
        console.log(e, 'onChange');
        this.setState({
            pageNo: e.current,

        }, () => {
            this.getData()
        })
    }
    onSearch = (e, key) => {
        this.setState({
            searchParams: {
                ...this.state.searchParams,
                [key]: e
            },
            pageNo: 1
        }, () => {
            this.getData()
        })
    }
    render() {
        const { columns, dataSource, tabs, totalCount, pageNo, pageSize, searchParams } = this.state
        const { name, mobile } = searchParams
        return (
            <div className='p-layout-box'>
                <div style={{ marginBottom: 20 }}>
                    <Search
                        defaultValue={name}
                        placeholder="姓名"
                        onSearch={(e) => this.onSearch(e, 'name')}
                        style={{
                            width: 200,
                            marginRight: 20
                        }}
                    />
                    <Search
                        defaultValue={mobile}
                        placeholder="手机号"
                        onSearch={(e) => this.onSearch(e, 'mobile')}
                        style={{
                            width: 200,
                        }}
                    />
                </div>
                <Table columns={columns} dataSource={dataSource} pagination={{
                    total: totalCount,
                    pageSize,
                    pageNo
                }}
                    bordered
                    onChange={this.onChange} />
            </div>
        );
    }
}
